<template>
  <div class="my-message">
      <nav class="message-nav">
          <ul>
              <li class="on"  @click = "gotoAddress('/me/mymessage')">
                <span>私信</span>
                <!--<b class="number" v-if="unReadMsg!='0'">{{unReadMsg}}</b>-->

              </li>
              <li @click = "gotoAddress('/me/msgdiscuss')">
                <span>评论</span>
                <b class="number" v-if="unReadPL!='0'">{{unReadPL}}</b>

              </li>
              <!--<li @click = "gotoAddress('/me/msgpraise')">-->
                <!--<span>赞</span>-->
              <!--</li>-->
              <li @click = "gotoAddress('/me/msgfans')">
                <span>新粉丝</span>
                <b class="number" v-if="newFansNum!='0'">{{newFansNum}}</b>

              </li>
              <li @click = "gotoAddress('/me/msgnews')">
                <span>通知</span>
                <b class="number" v-if="unReadNews!='0'">{{unReadNews}}</b>
              </li>
          </ul>
      </nav>
      <div class="no-msg-content" v-if="noMsg">
        <div class="no-msg">
          <img src="../../assets/me/05.png" alt="">
        </div>
        <div class="no-text">
          没有相关私信哦！
        </div>
      </div>
      <div class="msg-content" v-if="!noMsg">
          <ul>
	          <li class="clearFix" @click = "gotoAddress('/me/msgtalk?id='+msgItem.customer_id)" v-for="msgItem in msgArr">
	              <div class="fl">
	                  <div class=" img" style="position: relative;">
	                    <img width="40" height="40" class="icon fl" :src="msgItem.avatar">
	                    <!--<b class="badgate">3</b>-->

                      <span class="weidu" style="position: absolute;right: -15px; top: 0px;font-size: 12px; background: #b01f24; color: #fff; border-radius: 10px; padding: 0 5px; opacity: 0.9;" v-if="msgItem.is_new ==1">未读</span>
	                  </div>
	              </div>
	              <div class="fl right">
                  <div class="font clearFix">
                    <p class="fl name">{{msgItem.firstname}}</p>
                    <p class="fr time">{{msgItem.date_add}}</p>
                  </div>
	                <div class="content">
                    <p>{{msgItem.content}}</p>
                 </div>
	              </div>
	          </li>
          </ul>

        <div class="next-btn">
          <!--<mt-button type="danger" size="large">加载更多</mt-button>-->
        </div>

      </div>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
  name: 'MyMessage',
  data () {
    return {
    	noMsg: false,
      msgArr: [],
      token:sessionStorage.user && JSON.parse(sessionStorage.user).token || '',
      unReadMsg:'0',
      unReadPL:'0',
      unReadNews:'0',
      newFansNum:'0'
    }
  },
	methods: {
		_myMsginit () {


			let ajaxData = {};
			let _this=this;
      ajaxData.token = this.token;
			$.ajax({
        type:'post',
        url: RouteMap.myMessage,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){
          	
          	if(!utilities.isNull(res.data)){

              _this.msgArr = res.data.list;
          		_this.noMsg = false;
              
          	}else{
              

          		_this.noMsg = true;
          	}

          }
          else{
            //Toast(res.msg);
          }
        }
      })
		},
	  gotoAddress(path){
	    this.$router.push(path);
	  },

//    getUnReadMsg:function(){
//      if(!this.noMsg){
//        this.unReadMsg = this.msgArr.length;
//
//      }
//    },
    getUnReadPL:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getUnReadNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

            _this.unReadPL = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    getUnReadNews:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getUnReadNewsNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

            _this.unReadNews = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    getUnReadFans:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getNewFansNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

            _this.newFansNum = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    }

	},
	created() {
    
		
    this._myMsginit();
    this.getUnReadPL();
    this.getUnReadNews();
    this.getUnReadFans();

    var _this = this;
    clearInterval(utilities.timer);
    clearInterval(utilities.timer1);
    utilities.timer1 = setInterval(function(){

      _this._myMsginit();

    },2000)
    
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .my-message{
    padding: 1rem 0.5rem;
  }
.number{
  font-size: .55rem;
  color:#B01F24;
  position: absolute;
  top: -0.4rem;
  right: 0.2rem;
}


.msg-content li{
  background:#fff;
  box-sizing:border-box;
  padding:.4rem;
  margin-top:.2rem;
  border-bottom: 1px solid #f2f2f2;
}

.msg-content li .icon{
  border-radius:50%;
  margin-right:.2rem;
}
.msg-content .img{
  position: relative;
}

.msg-content .right{
  width:11.5rem;
padding-left: .3rem;
}
.msg-content .time{
  width:3.8rem;
  height:.6rem;
  overflow: hidden;
}
.msg-content .font{
  /*margin-left: 0.5rem;*/
  font-size: .45rem;
  line-height: .8rem;
}
  .msg-content .content {
    font-size: .6rem;
    color: #707070;
    line-height: 1rem;
  }


  .next-btn{
    padding: 0 0.5rem;
    padding-bottom: 2rem;
    margin-top: 1rem;
  }

</style>
